<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人智能视频库管理系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <div class="header-content">
                <h1 class="logo">🎬 智能视频库</h1>
                <div class="header-actions">
                    <button id="scanBtn" class="btn btn-primary">扫描视频</button>
                    <button id="refreshBtn" class="btn btn-secondary">刷新</button>
                </div>
            </div>
        </header>

        <!-- 搜索和筛选区域 -->
        <div class="filters-section">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索视频标题、作者、系列或标签..." class="search-input">
                <button id="searchBtn" class="search-btn">🔍</button>
            </div>
            <div class="filter-controls">
                <select id="tagFilter" class="filter-select">
                    <option value="">所有标签</option>
                </select>
                <select id="seriesFilter" class="filter-select">
                    <option value="">所有系列</option>
                </select>
                <select id="sortFilter" class="filter-select">
                    <option value="updated">最新更新</option>
                    <option value="title">标题排序</option>
                    <option value="views">播放次数</option>
                    <option value="rating">评分排序</option>
                </select>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 视频网格 -->
            <div id="videoGrid" class="video-grid">
                <div class="loading">正在加载视频...</div>
            </div>

            <!-- 加载更多 -->
            <div id="loadMore" class="load-more" style="display: none;">
                <button id="loadMoreBtn" class="btn btn-outline">加载更多</button>
            </div>
        </main>

        <!-- 视频播放器模态框 -->
        <div id="videoModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="modalTitle">视频播放</h3>
                    <span class="close">&times;</span>
                </div>
                <div class="modal-body">
                    <video id="videoPlayer" controls>
                        您的浏览器不支持视频播放
                    </video>
                    <div class="video-info">
                        <div class="info-row">
                            <span class="info-label">文件大小:</span>
                            <span id="infoSize">-</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">播放次数:</span>
                            <span id="infoViews">-</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">评分:</span>
                            <span id="infoRating">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 视频编辑模态框 -->
        <div id="editModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>编辑视频信息</h3>
                    <span class="close">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="editForm" class="edit-form">
                        <input type="hidden" id="editId">
                        <div class="form-group">
                            <label for="editTitle">标题 *</label>
                            <input type="text" id="editTitle" required>
                        </div>
                        <div class="form-group">
                            <label for="editAuthor">作者</label>
                            <input type="text" id="editAuthor">
                        </div>
                        <div class="form-group">
                            <label for="editSeries">系列</label>
                            <input type="text" id="editSeries">
                        </div>
                        <div class="form-group">
                            <label for="editTags">标签 (逗号分隔)</label>
                            <input type="text" id="editTags" placeholder="教程,编程,前端">
                        </div>
                        <div class="form-group">
                            <label for="editRating">评分</label>
                            <select id="editRating">
                                <option value="0">未评分</option>
                                <option value="1">★</option>
                                <option value="2">★★</option>
                                <option value="3">★★★</option>
                                <option value="4">★★★★</option>
                                <option value="5">★★★★★</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="editDescription">描述</label>
                            <textarea id="editDescription" rows="3"></textarea>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">保存</button>
                            <button type="button" class="btn btn-secondary" id="cancelEdit">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 扫描进度模态框 -->
        <div id="scanModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>扫描视频文件</h3>
                </div>
                <div class="modal-body">
                    <div class="directory-selection">
                        <div class="form-group">
                            <label for="directoryInput">选择视频目录:</label>
                            <div class="directory-input-group">
                                <input type="text" id="directoryInput" placeholder="输入视频目录路径..." class="directory-input">
                                <button type="button" id="browseBtn" class="btn btn-outline">浏览</button>
                                <input type="file" id="directoryPicker" webkitdirectory multiple style="display: none;" accept="video/*">
                            </div>
                            <div class="directory-example">
                                <small>示例: D:\Videos 或 /home/user/Videos</small>
                                <br>
                                <small class="directory-note">注意: 在Chrome/Edge中点击"浏览"可选择目录</small>
                            </div>
                        </div>
                    </div>
                    <div class="scan-progress" style="display: none;">
                        <div class="progress-bar">
                            <div id="progressFill" class="progress-fill"></div>
                        </div>
                        <div id="scanStatus" class="scan-status">准备开始扫描...</div>
                    </div>
                    <div class="scan-actions">
                        <button id="startScan" class="btn btn-primary">开始扫描</button>
                        <button id="cancelScan" class="btn btn-secondary" style="display: none;">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
